<template>
    <div class="srcThem">
        <div class="left">
          <div class="icon"><svg-icon icon-class="tree-table"/> <span>数据集目录</span></div>
          <el-tree :data="navList" node-key="id" :default-expanded-keys="defaultexpandedkeys" accordion :props="defaultProps" @node-click="handleNodeClick"></el-tree> 
        </div>
       
        <div class="right" v-if="indexPId!=0">
              <div style="margin-bottom: 10px;">
                <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />在该目录下创建数据集</el-button>
                <template>
                  <el-popconfirm title="确定删除吗？" icon-color="#f00" @confirm="deleteSelectData2(navData)">
                    <el-button slot="reference" type="danger" v-show="showDel">删除数据集</el-button>
                  </el-popconfirm>
              </template>
              </div>  
              <ykhttb ref="httbRef"
                :btn-is-show="btnIsShow"
                :table-col="tabUserList" 
                :table-data="tableUserData"
                @getDataDetileInfo="getDataDetileInfo"
                @deleteSelectData="deleteSelectData"/>
                <!-- 分页 -->
                <div style="text-align:right;margin-top:10px;">
                    <el-pagination
                    :current-page="page"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    />
                </div>
        </div>
        <div class="right" style="text-align: center;padding-top: 250px;" v-else>
          <img v-if="nodata" :src="nodata" style="vertical-align: middle;width: 150px;">
          <div>暂无数据</div>
        </div>



        <el-dialog :close-on-click-modal="false" :title="title" width="30%" :visible.sync="dialogTableVisible">
        <!-- 名称和路径必输 -->
            <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm autoClass">
            <el-form-item label="数据集名称" prop="subjectDataSetName">
                <el-input :disabled="disFlag"  v-model="ruleForm['subjectDataSetName']" clearable placeholder="" />
            </el-form-item>
            <el-form-item label="数据集描述" prop="remark">
                <el-input :disabled="disFlag"  v-model="ruleForm['remark']" clearable placeholder="" />
            </el-form-item>
            <el-form-item label="接入任务类型" prop="dataAccessTaskTypeNum">
                <el-select :disabled="disFlag"  v-model="ruleForm['dataAccessTaskTypeNum']" @change="getName" clearable placeholder="请选择质量规则类型">
                  <el-option 
                      v-for="(item,i) in selectDataList"
                      :key="i"
                      :label="item.name"
                      :value="Number(item.num)"
                  />
                </el-select>
            </el-form-item>
            <el-form-item label="接入任务名称" prop="dataAccessTaskTable">
              <el-select :disabled="disFlag"  v-model="ruleForm['dataAccessTaskTable']"  @change="getName2" clearable placeholder="请选择质量规则类型">
                  <el-option 
                      v-for="(item,i) in selectDataList2"
                      :key="i"
                      :label="item.dataAccessTaskName"
                      :value="item.dataAccessTaskTable"
                  />
                </el-select>
            </el-form-item>
            </el-form>
        <div style="text-align: center;" v-if="!disFlag">
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('return')">返回</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import nodata from '@/assets/images/nodata.png'

import { 
  dataSubjectdataSetgetSubjectNode, 
  dataSubjectdirectoryupdateById, 
  dataSubjectdirectorygetList,
  dataSubjectdataSetdeleteDataSet,
  dataSubjectdataSetgetDataAccessTask,
  dataSubjectdataSetaddDataSet,
  dataSubjectdataSetgetDataSetInfo
} from '@/api/zt/index'
import experiment from '@/mixins/experiment'

export default {
  components: {
  },
  mixins: [experiment],
  data() {
    return {
      nodata:nodata,
      defaultexpandedkeys:[],
        navData:null,
        indexPId : 0 ,
        navList:[],
        defaultProps: {
          children: 'children',
          label: 'nodeName'
        },
      btnIsShow: {
        operate: false,
        detile: true,
        del: true
      },
      title: '新增',
      rules: {
        subjectDataSetName: [
          { required: true, message: '请输入数据集名称', trigger: 'change' }
        ],
        dataAccessTaskTypeNum: [
            { required: true, message: '请选择接入任务类型', trigger: 'change' }
        ],
        dataAccessTaskTable: [
            { required: true, message: '请选择任务名称', trigger: 'change' }
        ],
      },
      selectDataList2:[],
      dialogTableVisible: false,
      ruleForm: {
        "dataAccessTaskTypeName": "",
        "dataAccessTaskTable": "",
        "subjectDirectoryId": 0,
        "subjectDataSetName": "",
        "dataAccessTaskTypeNum": 0,
        "subjectDirectoryName": "",
        "dataAccessTaskName": "",
        "remark": ""
      },
      userId: '',
      formInline: {
        'dataModelName': ''
      },
      tableUserData: [],
      tabUserList: [],
      selectDataList: [],
      showDel:false,
      total: 0,
      size: 10,
      page: 1
    }
  },
  mounted() {
    this.$nextTick(() => {
        this.getNavList()
        this.getcodequery('dataAccessTaskType')
    })
  },
  methods: {
    queryList(v){
      this.$refs.httbRef.isShowLoading(true)

      dataSubjectdataSetgetDataSetInfo({
        "pageIndex": this.page,
        "id":v.id,
        "pageSize": this.size
      }).then(res => {
          this.tabUserList = []
          if (res.code == 200) {
            this.tableUserData = res.data.records
            this.$refs.httbRef.isShowLoading(false)
            if(this.tableUserData.length>0){
              let keys = Object.keys(this.tableUserData[0])
              keys.forEach((item,index)=>{
                var o = {
                  key:item,
                  title:item
                }
              this.tabUserList.push(o)
              })
            }
            this.total = res.data.total
          } else {
            this.errorDialog(res.msg)
          }
        })
    },
    deleteSelectData2(v) {
        const ids = { id: v.id }
        dataSubjectdataSetdeleteDataSet(ids).then(res => {
          if (res.code == 200) {
            this.indexPId = 0
            this.getNavList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      },
    getNavChildrenList(v) {
        this.dialogTableVisible = false
        dataSubjectdirectorygetList({
          'pageIndex': this.page,
          'pageSize': this.size,
          'subjectDirectoryName': v
        }).then(res => {
          this.tableUserData = res.data.records
          this.total = res.data.total
        })
      },
    handleNodeClick(data) {
      this.defaultexpandedkeys = [data.id]
      this.indexPId = data.parentId 
      this.size = 10
      this.page = 1
      this.navData = JSON.parse(JSON.stringify(data))
      if(data.parentId!='0'&&data.parentId!='1'){
        this.queryList(data)
        this.showDel= true
        return
      }
        this.showDel= false
        if(this.indexPId=='1'){
            this.tabUserList = [
                {
                    key: 'subjectDirectoryName',
                    title: '目录名称'
                },
                {
                    key: 'subjectDirectoryTypeName',
                    title: '目录类型'
                },
                {
                    key: 'dataProvider',
                    title: '数据提供方'
                },
                {
                    key: 'phoneNumber',
                    title: '联系方式'
                }
            ]
        }
        this.getNavChildrenList(data.nodeName)
      },
    getName(){
      dataSubjectdataSetgetDataAccessTask({
        "dataAccessTaskTypeNum": this.ruleForm['dataAccessTaskTypeNum']
      }).then(res => {
        if (res.code == 200) {
          this.selectDataList2 = res.data
        } else {
          this.errorDialog(res.msg)
        }
      })
        this.selectDataList.forEach((item,index)=>{
            if(this.ruleForm['dataAccessTaskTypeNum']==item.num){
              this.ruleForm['dataAccessTaskTypeName'] = item.name
            }
        })
    },
    getName2(){
      this.selectDataList2.forEach((item,index)=>{
          if(this.ruleForm['dataAccessTaskTable']==item.dataAccessTaskTable){
            this.ruleForm['dataAccessTaskName'] = item.dataAccessTaskName
          }
      })
    },
    deleteSelectData(v) { //表格里面删除废弃
      const ids = [{ id: v.id }]
      dataSubjectdataSetdeleteDataSet(ids).then(res => {
        if (res.code == 200) {
          this.getNavList()
        } else {
          this.errorDialog(res.msg)
        }
      })
    },
    commitFromData() {
      
      if(this.navData.parentId!='0'&&this.navData.parentId!='1'){
        this.ruleForm.subjectDirectoryId = this.navData.parentId
        this.ruleForm.subjectDirectoryName = this.navData.parentName
      }else{
        this.ruleForm.subjectDirectoryId = this.navData.id
        this.ruleForm.subjectDirectoryName = this.navData.nodeName
      }

     
      
      if (this.ruleForm.hasOwnProperty('id')) {
        dataSubjectdirectoryupdateById(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.getNavList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      } else {
        dataSubjectdataSetaddDataSet(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.getNavList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      }
    },
    handleSizeChange(v) {
      this.page = 1
      this.size = v
      if(this.showDel){
        this.queryList(this.navData) // 三级
      }else{
        this.getNavChildrenList(this.navData.nodeName)//2级
      }
    },
    handleCurrentChange(v) {
      this.page = v
      if(this.showDel){
        this.queryList(this.navData) // 三级
      }else{
        this.getNavChildrenList(this.navData.nodeName)//2级
      }
    },
    getNavList(){
      this.dialogTableVisible = false
      dataSubjectdataSetgetSubjectNode().then(res => {
        this.navList = [res.data]
        if(this.navList[0].children && this.navList[0].children[0]){
          this.handleNodeClick(this.navList[0].children[0])
        }
        if(this.defaultexpandedkeys.length==0){
          let ks = '1'
          if(res.data.children&&res.data.children.length>0){
            ks = res.data.children[0].id
          }
          this.defaultexpandedkeys = [ks]
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.srcThem{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0 !important;
    .left{
        width: 16%;
        border: 1px solid #eee;
        border-radius: 4px;
        padding:30px 10px 10px 10px;
        min-height: calc(100vh - 115px);
        >div.icon{
          padding-left: 5px;
          font-weight: bold;
          margin-bottom:10px;
          border-bottom: 1px solid #eee;
          svg{
            font-size:16px;
            margin: 0 auto;
            margin-bottom:5px;
            vertical-align: middle;
            color: #fc9001;
            margin-right: 2px;
          }
        }
    }
    .right{
        width: 83%;
        padding:20px 10px;
    }
    .el-select{
        width:100%;
    }
}
</style>
